<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="70px">
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="form.userName" @blur="$set(form, 'password', '')"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" @blur="checkLogin"></el-input>
    </el-form-item>
    <el-form-item label="大类" required>
      <el-select v-model="form.firstclass" style="width: 100%" @change="loadProjects">
        <el-option label="CDT工时" value="CDT工时"></el-option>
        <el-option label="研发工时" value="研发工时"></el-option>
        <el-option label="维护工时" value="维护工时"></el-option>
        <el-option label="公共事务" value="公共事务"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="维护" v-show="form.firstclass === '维护工时'">
      <el-select v-model="form.maintainsubs" style="width: 100%">
        <el-option v-for="m in maintainsubses" :label="m.name.length" :value="m.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="项目" required>
      <el-select v-model="form.projectid" style="width: 100%" filterable @change="loadLeaders">
        <el-option v-for="p in projects" :label="p.project_name.length>20?(p.project_name.substr(0,19)+'...'):p.project_name" :value="p.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="负责人" required>
      <el-select v-model="form.projectleader" style="width: 100%">
        <el-option v-for="l in leaders" :label="l" :value="l"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item style="text-align: center">
      <el-button type="primary" @click="onSave">保存</el-button>
    </el-form-item>
  </el-form>
</template>
<script type="text/javascript">
  import { mapGetters, mapMutations, mapActions } from 'vuex'

  export default {
    data () {
      return {
        form: {},
        rules: {
          title: [
            { required: true, message: '事项不能为空', trigger: 'change' }
          ],
          time: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
        }
      }
    },
    computed: {
      ... mapGetters(['projects', 'leaders', 'maintainsubses'])
    },
    methods: {
      ... mapMutations(['setUser', 'loadUser']),
      ... mapActions(['runLogin', 'getTimes', 'getProjects', 'getLeaders']),
      checkLogin () {
        if (this.form.userName && this.form.password) {
          this.runLogin(this.form).catch(message => {
            this.$message.error('验证登录失败: ' + message)
          })
        }
      },
      loadProjects () {
        this.getProjects(this.form.firstclass).catch(message => {
          this.$message.error('查询项目失败: ' + message)
        })
      },
      loadLeaders () {
        this.getLeaders(this.form.projectid).catch(message => {
          this.$message.error('查询负责人失败: ' + message)
        })
      },
      onSave () {
        if (this.form.firstclass === '维护工时') {
          this.form.maintainsubsName = this.maintainsubses.filter(x => x.value === this.form.maintainsubs)[0].name
        } else {
          this.form.maintainsubs = ''
        }
        this.form.projectName = this.projects.filter(x => x.id === this.form.projectid)[0].project_name
        this.setUser(this.form)
        this.getTimes().catch(message => {
          this.$message.error('获取工时失败:' + message)
        })
      }
    }
  }
</script>